<template>
    <div class="bazi-chart">
        <div class="chart-display">
            <div class="bazi-grid">
                <!-- 年柱 -->
                <div class="pillar year-pillar">
                    <div class="pillar-label">年柱</div>
                    <div class="stem-branch">
                        <div class="heavenly-stem" :class="getElementClass(yearStem)">{{ yearStem }}</div>
                        <div class="earthly-branch" :class="getElementClass(yearBranch, true)">{{ yearBranch }}</div>
                        <div class="element-info">{{ getStemElement(yearStem) }}</div>
                        <div class="element-info">{{ getBranchElement(yearBranch) }}</div>
                    </div>
                </div>

                <!-- 月柱 -->
                <div class="pillar month-pillar">
                    <div class="pillar-label">月柱</div>
                    <div class="stem-branch">
                        <div class="heavenly-stem" :class="getElementClass(monthStem)">{{ monthStem }}</div>
                        <div class="earthly-branch" :class="getElementClass(monthBranch, true)">{{ monthBranch }}</div>
                        <div class="element-info">{{ getStemElement(monthStem) }}</div>
                        <div class="element-info">{{ getBranchElement(monthBranch) }}</div>
                    </div>
                </div>

                <!-- 日柱 -->
                <div class="pillar day-pillar">
                    <div class="pillar-label">日柱</div>
                    <div class="stem-branch">
                        <div class="heavenly-stem" :class="getElementClass(dayStem)">{{ dayStem }}</div>
                        <div class="earthly-branch" :class="getElementClass(dayBranch, true)">{{ dayBranch }}</div>
                        <div class="element-info">{{ getStemElement(dayStem) }}</div>
                        <div class="element-info">{{ getBranchElement(dayBranch) }}</div>
                    </div>
                </div>

                <!-- 时柱 -->
                <div class="pillar hour-pillar">
                    <div class="pillar-label">时柱</div>
                    <div class="stem-branch">
                        <div class="heavenly-stem" :class="getElementClass(hourStem)">{{ hourStem }}</div>
                        <div class="earthly-branch" :class="getElementClass(hourBranch, true)">{{ hourBranch }}</div>
                        <div class="element-info">{{ getStemElement(hourStem) }}</div>
                        <div class="element-info">{{ getBranchElement(hourBranch) }}</div>
                    </div>
                </div>
            </div>

            <div class="bazi-analysis">
                <div class="analysis-title">八字五行分析</div>
                <div class="analysis-summary">
                    <div class="element-count" v-for="(count, element) in elementCounts" :key="element">
                        <span :class="'element-' + element">{{ element }}：{{ count }}</span>
                    </div>
                </div>
                <div class="analysis-content">
                    <p>{{ analysis }}</p>
                </div>
            </div>

            <div class="luck-pillars">
                <div class="luck-title">大运</div>
                <div class="luck-grid">
                    <div v-for="(pillar, index) in luckPillars" :key="index" class="luck-pillar">
                        <div class="luck-age">{{ pillar.startAge }}-{{ pillar.endAge }}</div>
                        <div class="luck-year">{{ pillar.startYear }}</div>
                        <div class="luck-stem-branch">
                            <div :class="getElementClass(pillar.stem)">{{ pillar.stem }}</div>
                            <div :class="getElementClass(pillar.branch, true)">{{ pillar.branch }}</div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>
</template>

<script>
export default {
    name: 'BaziChart',
    props: {
        chartData: {
            type: Object,
            required: true
        },
        userInfo: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            chartCalculated: false,

            // Heavenly Stems and Earthly Branches arrays
            heavenlyStems: ['甲', '乙', '丙', '丁', '戊', '己', '庚', '辛', '壬', '癸'],
            earthlyBranches: ['子', '丑', '寅', '卯', '辰', '巳', '午', '未', '申', '酉', '戌', '亥'],

            // Calculated data
            yearStem: '',
            yearBranch: '',
            monthStem: '',
            monthBranch: '',
            dayStem: '',
            dayBranch: '',
            hourStem: '',
            hourBranch: '',
            elementCounts: {
                '木': 0,
                '火': 0,
                '土': 0,
                '金': 0,
                '水': 0
            },
            luckPillars: [],
            analysis: ''
        };
    },
    computed: {

    },
    mounted() {
        if (!this.chartData) {
            console.error('chartData is missing');
            return;
        }

        // 验证所有必需的字段
        const requiredFields = ['year', 'month', 'day', 'hour'];
        const missingFields = requiredFields.filter(field => !this.chartData[field]);
        
        if (missingFields.length > 0) {
            console.error(`Missing required fields in chartData: ${missingFields.join(', ')}`);
            return;
        }

        // 验证数据类型和范围
        const validations = [
            { field: 'year', min: 1900, max: 2100 },
            { field: 'month', min: 1, max: 12 },
            { field: 'day', min: 1, max: 31 },
            { field: 'hour', min: 1, max: 12 }
        ];

        for (const validation of validations) {
            const value = parseInt(this.chartData[validation.field], 10);
            if (isNaN(value) || value < validation.min || value > validation.max) {
                console.error(`Invalid ${validation.field} value in chartData: ${this.chartData[validation.field]}. Expected between ${validation.min} and ${validation.max}`);
                return;
            }
        }

        this.calculateBazi();
    },
    methods: {
        calculateBazi() {
            // Ensure chartData and its properties exist
            if (!this.chartData || !this.chartData.year || !this.chartData.month || !this.chartData.day || !this.chartData.hour) {
                console.error("Invalid chartData provided:", this.chartData);
                return; // Stop calculation if data is invalid
            }

            // Convert birth date and time parts to numbers
            const birthYear = parseInt(this.chartData.birthYear, 10);
            const birthMonth = parseInt(this.chartData.birthMonth, 10);
            const birthDay = parseInt(this.chartData.birthDay, 10);
            const birthHour = parseInt(this.chartData.birthHour, 10);
            const gender = this.userInfo.gender;

            // Basic validation to ensure values are numbers
            if (isNaN(birthYear) || isNaN(birthMonth) || isNaN(birthDay) || isNaN(birthHour)) {
                console.error("Birth date/time values are not valid numbers:", { birthYear, birthMonth, birthDay, birthHour });
                return; // Stop calculation if values are not numbers
            }

            const isBeforeLichun = birthMonth === 1 || (birthMonth === 2 && birthDay < 4);
            const effectiveYear = isBeforeLichun ? birthYear - 1 : birthYear;

            // Calculate year stem and branch
            const yearCycleNumber = (effectiveYear - 4) % 60;
            const yearStemIndex = yearCycleNumber % 10;
            const yearBranchIndex = yearCycleNumber % 12;

            this.yearStem = this.heavenlyStems[(yearStemIndex + 10) % 10]; // Ensure index is within bounds
            this.yearBranch = this.earthlyBranches[(yearBranchIndex + 12) % 12]; // Ensure index is within bounds

            // 2. Calculate Month Pillar
            let monthStemOffset = 0;
            if (yearStemIndex === 0 || yearStemIndex === 5) monthStemOffset = 2; // 甲己
            else if (yearStemIndex === 1 || yearStemIndex === 6) monthStemOffset = 4; // 乙庚
            else if (yearStemIndex === 2 || yearStemIndex === 7) monthStemOffset = 6; // 丙辛
            else if (yearStemIndex === 3 || yearStemIndex === 8) monthStemOffset = 8; // 丁壬
            else if (yearStemIndex === 4 || yearStemIndex === 9) monthStemOffset = 0; // 戊癸

            let solarMonth = birthMonth;
            if (birthDay < 6) solarMonth = (birthMonth - 1 === 0) ? 12 : birthMonth - 1;

            const monthBranchIndex = (solarMonth + 1) % 12;
            this.monthBranch = this.earthlyBranches[(monthBranchIndex + 12) % 12]; // Ensure index is within bounds

            const monthStemIndex = (monthStemOffset + solarMonth - 1) % 10;
            this.monthStem = this.heavenlyStems[(monthStemIndex + 10) % 10]; // Ensure index is within bounds

            // 3. Calculate Day Pillar
            const daysSinceStart = Math.floor((new Date(birthYear, birthMonth - 1, birthDay).getTime() / 86400000));
            const dayCycleNumber = (daysSinceStart + 15) % 60;

            const dayStemIndex = dayCycleNumber % 10;
            const dayBranchIndex = dayCycleNumber % 12;

            this.dayStem = this.heavenlyStems[(dayStemIndex + 10) % 10]; // Ensure index is within bounds
            this.dayBranch = this.earthlyBranches[(dayBranchIndex + 12) % 12]; // Ensure index is within bounds

            // 4. Calculate Hour Pillar
            let hourStemOffset = 0;
            if (dayStemIndex === 0 || dayStemIndex === 5) hourStemOffset = 0; // 甲己
            else if (dayStemIndex === 1 || dayStemIndex === 6) hourStemOffset = 2; // 乙庚
            else if (dayStemIndex === 2 || dayStemIndex === 7) hourStemOffset = 4; // 丙辛
            else if (dayStemIndex === 3 || dayStemIndex === 8) hourStemOffset = 6; // 丁壬
            else if (dayStemIndex === 4 || dayStemIndex === 9) hourStemOffset = 8; // 戊癸

            const hourBranchIndex = birthHour - 1;
            this.hourBranch = this.earthlyBranches[(hourBranchIndex + 12) % 12]; // Ensure index is within bounds

            const hourStemIndex = (hourStemOffset + hourBranchIndex) % 10;
            this.hourStem = this.heavenlyStems[(hourStemIndex + 10) % 10]; // Ensure index is within bounds

            // 5. Calculate Five Elements Distribution
            this.calculateElementCounts();

            // 6. Generate Analysis
            this.generateAnalysis();

            // 7. Calculate Luck Pillars (大运)
            this.calculateLuckPillars(birthYear, birthMonth, birthDay, gender); // Pass birthYear for luck pillar calculation

            this.chartCalculated = true;
        },

        calculateElementCounts() {
            // Reset counters
            for (const element in this.elementCounts) {
                this.elementCounts[element] = 0;
            }

            // Count elements from stems
            this.elementCounts[this.getStemElement(this.yearStem)]++;
            this.elementCounts[this.getStemElement(this.monthStem)]++;
            this.elementCounts[this.getStemElement(this.dayStem)]++;
            this.elementCounts[this.getStemElement(this.hourStem)]++;

            // Count hidden elements from branches
            const branches = [this.yearBranch, this.monthBranch, this.dayBranch, this.hourBranch];
            branches.forEach(branch => {
                const hiddenElements = this.getHiddenElements(branch);
                hiddenElements.forEach(element => {
                    this.elementCounts[element]++;
                });
            });
        },

        getStemElement(stem) {
            const stemElements = {
                '甲': '木', '乙': '木',
                '丙': '火', '丁': '火',
                '戊': '土', '己': '土',
                '庚': '金', '辛': '金',
                '壬': '水', '癸': '水'
            };
            return stemElements[stem] || '';
        },

        getBranchElement(branch) {
            const branchElements = {
                '子': '水', '丑': '土',
                '寅': '木', '卯': '木',
                '辰': '土', '巳': '火',
                '午': '火', '未': '土',
                '申': '金', '酉': '金',
                '戌': '土', '亥': '水'
            };
            return branchElements[branch] || '';
        },

        getHiddenElements(branch) {
            // Each branch also contains hidden heavenly stems (藏干)
            const hiddenStems = {
                '子': ['癸'],
                '丑': ['己', '辛', '癸'],
                '寅': ['甲', '丙', '戊'],
                '卯': ['乙'],
                '辰': ['戊', '乙', '癸'],
                '巳': ['丙', '庚', '戊'],
                '午': ['丁', '己'],
                '未': ['己', '丁', '乙'],
                '申': ['庚', '壬', '戊'],
                '酉': ['辛'],
                '戌': ['戊', '辛', '丁'],
                '亥': ['壬', '甲']
            };

            const stems = hiddenStems[branch] || [];
            return stems.map(stem => this.getStemElement(stem));
        },

        calculateLuckPillars() {
            // The calculation of luck pillars involves determining the direction and interval
            // Based on gender and birth month
            const isYangMonth = this.isStemYang(this.monthStem);
            const isYangPerson = (this.userInfo.gender === 'male' && isYangMonth) || (this.userInfo.gender === 'female' && !isYangMonth);

            // Direction to progress (forward or backward in the 60-year cycle)
            const direction = isYangPerson ? 1 : -1;

            // Start from the month pillar
            let stemIndex = (this.heavenlyStems.indexOf(this.monthStem) + 10) % 10;
            let branchIndex = (this.earthlyBranches.indexOf(this.monthBranch) + 12) % 12;

            // Calculate the starting age (traditionally determined by specific rules)
            // For simplicity, we'll start from age 10
            let startAge = 10;
            let startYear = parseInt(this.chartData.birthYear, 10) + startAge;

            this.luckPillars = [];

            for (let i = 0; i < 8; i++) {
                // Move to next stem and branch according to direction
                stemIndex = (stemIndex + direction + 10) % 10;
                branchIndex = (branchIndex + direction + 12) % 12;

                // Calculate age range for this pillar (each pillar spans 10 years)
                const endAge = startAge + 9;

                this.luckPillars.push({
                    stem: this.heavenlyStems[stemIndex],
                    branch: this.earthlyBranches[branchIndex],
                    startAge: startAge,
                    endAge: endAge,
                    startYear: startYear
                });

                // Update for next pillar
                startAge += 10;
                startYear += 10;
            }
        },

        isStemYang(stem) {
            const yangStems = ['甲', '丙', '戊', '庚', '壬'];
            return yangStems.includes(stem);
        },

        generateAnalysis() {
            // Simple analysis based on the day master (日主) and element counts
            const dayMaster = this.getStemElement(this.dayStem);
            let strengthLevel = '';

            // Determine the strength of the day master
            let dayMasterTotal = this.elementCounts[dayMaster];
            let totalElements = 0;
            for (const element in this.elementCounts) {
                totalElements += this.elementCounts[element];
            }

            const dayMasterPercentage = (dayMasterTotal / totalElements) * 100;

            if (dayMasterPercentage < 10) strengthLevel = '极弱';
            else if (dayMasterPercentage < 20) strengthLevel = '弱';
            else if (dayMasterPercentage < 30) strengthLevel = '偏弱';
            else if (dayMasterPercentage < 40) strengthLevel = '中和';
            else if (dayMasterPercentage < 50) strengthLevel = '偏强';
            else if (dayMasterPercentage < 60) strengthLevel = '强';
            else strengthLevel = '极强';

            // Generate favorable and unfavorable elements
            const favorableElements = this.getFavorableElements(dayMaster, strengthLevel);
            const unfavorableElements = this.getUnfavorableElements(dayMaster, strengthLevel);

            // Generate analysis text
            this.analysis = `日主五行属${dayMaster}，强度为${strengthLevel}。\n\n`;
            this.analysis += `生助关系：${dayMaster}生${this.getGeneratedElement(dayMaster)}，${this.getGeneratingElement(dayMaster)}生${dayMaster}。\n`;
            this.analysis += `克泄关系：${dayMaster}克${this.getControlledElement(dayMaster)}，${this.getControllingElement(dayMaster)}克${dayMaster}。\n\n`;
            this.analysis += `有利五行：${favorableElements.join('、')}。\n`;
            this.analysis += `不利五行：${unfavorableElements.join('、')}。\n\n`;

            // Add personalized advice based on the five elements analysis
            this.analysis += this.getPersonalAdvice(dayMaster, strengthLevel);
        },

        getFavorableElements(element, strength) {
            // The favorable elements depend on the strength of the day master
            if (strength.includes('弱') || strength === '中和') {
                // If day master is weak, elements that generate it or are generated by it are favorable
                return [this.getGeneratingElement(element), this.getGeneratedElement(element)];
            } else {
                // If day master is strong, elements that control it or are controlled by it are favorable
                return [this.getControllingElement(element), this.getControlledElement(element)];
            }
        },

        getUnfavorableElements(element, strength) {
            // The unfavorable elements are the opposite of favorable elements
            if (strength.includes('弱') || strength === '中和') {
                return [this.getControllingElement(element), this.getControlledElement(element)];
            } else {
                return [this.getGeneratingElement(element), this.getGeneratedElement(element)];
            }
        },

        getGeneratingElement(element) {
            // 五行相生关系: 木生火，火生土，土生金，金生水，水生木
            const generating = {
                '木': '水',
                '火': '木',
                '土': '火',
                '金': '土',
                '水': '金'
            };
            return generating[element] || '';
        },

        getGeneratedElement(element) {
            // 五行相生关系: 木生火，火生土，土生金，金生水，水生木
            const generated = {
                '木': '火',
                '火': '土',
                '土': '金',
                '金': '水',
                '水': '木'
            };
            return generated[element] || '';
        },

        getControllingElement(element) {
            // 五行相克关系: 木克土，土克水，水克火，火克金，金克木
            const controlling = {
                '木': '金',
                '火': '水',
                '土': '木',
                '金': '火',
                '水': '土'
            };
            return controlling[element] || '';
        },

        getControlledElement(element) {
            // 五行相克关系: 木克土，土克水，水克火，火克金，金克木
            const controlled = {
                '木': '土',
                '火': '金',
                '土': '水',
                '金': '木',
                '水': '火'
            };
            return controlled[element] || '';
        },

        getPersonalAdvice(dayMaster, strength) {
            // Provide personalized advice based on the day master element and its strength
            let advice = '个人发展建议：\n';

            switch (dayMaster) {
                case '木':
                    advice += '木主仁，性格上通常有爱心、有理想，创造力强，善于规划。';
                    if (strength.includes('弱')) {
                        advice += '木弱需要水的滋养，建议多接触与水相关的事物或环境，如靠近水源生活，选择与水相关的行业如航运、饮料等。';
                    } else {
                        advice += '木强需要金来制约，可以考虑金属装饰品，从事金相关的行业如银行、珠宝等，有助于平衡自身能量。';
                    }
                    break;
                case '火':
                    advice += '火主礼，性格上通常热情开朗，有领导能力，善于表达和沟通。';
                    if (strength.includes('弱')) {
                        advice += '火弱需要木的助力，建议接触更多木质环境，如林区生活，或从事与木相关的行业如园艺、家具等。';
                    } else {
                        advice += '火强需要水来制约，可以多接触水环境，从事与水相关的事业，或佩戴水属性的饰品，有助于调和过盛的火气。';
                    }
                    break;
                case '土':
                    advice += '土主信，性格上通常踏实稳重，务实可靠，有耐心。';
                    if (strength.includes('弱')) {
                        advice += '土弱需要火的助长，建议多接触阳光，居住在光线充足的环境，或从事与火相关的行业如餐饮、照明等。';
                    } else {
                        advice += '土强需要木来制约，可以多接触植物，从事与植物相关的工作，或在自然环境中活动，有助于消耗过盛的土气。';
                    }
                    break;
                case '金':
                    advice += '金主义，性格上通常刚毅坚定，注重公正，有决断力。';
                    if (strength.includes('弱')) {
                        advice += '金弱需要土的支持，建议居住在土质良好的地区，或从事与土地相关的行业如房地产、农业等。';
                    } else {
                        advice += '金强需要火来制约，可以多接触暖色调环境，从事需要热情和创造力的工作，有助于软化过于刚硬的个性。';
                    }
                    break;
                case '水':
                    advice += '水主智，性格上通常聪明灵活，善于思考，适应能力强。';
                    if (strength.includes('弱')) {
                        advice += '水弱需要金的滋养，建议多接触金属元素，或从事与金属相关的行业如机械、珠宝等。';
                    } else {
                        advice += '水强需要土来制约，可以多接触土质环境，从事与土地相关的工作，或佩戴土属性的饰品，有助于稳定过于流动的性格。';
                    }
                    break;
            }

            return advice;
        },

        getElementClass(character, isBranch = false) {
            // Return CSS class based on the five element of the character
            if (isBranch) {
                return 'element-' + this.getBranchElement(character);
            } else {
                return 'element-' + this.getStemElement(character);
            }
        },

        resetChart() {
            this.chartCalculated = false;
        }
    }
};
</script>

<style lang="scss" scoped>
.bazi-chart {
    background: #f9f6f1 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><path d="M0 20h40M20 0v40" stroke="%23e8e0d5" stroke-width="0.5"/></svg>') repeat;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    .chart-display {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .bazi-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
        padding: 1rem;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 0.5rem;
        border: 1px solid #e8e0d5;
    }

    .pillar {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 1rem;
        border-radius: 0.5rem;
        background: white;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s ease;

        &:hover {
            transform: translateY(-2px);
        }
    }

    .pillar-label {
        font-size: 1.2rem;
        font-weight: bold;
        margin-bottom: 1rem;
        color: #4a4a4a;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    }

    .stem-branch {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .heavenly-stem,
    .earthly-branch {
        font-size: 1.5rem;
        padding: 0.5rem 1rem;
        border-radius: 0.25rem;
        min-width: 3rem;
        text-align: center;
    }

    .element-info {
        font-size: 0.9rem;
        color: #666;
    }

    // 五行颜色
    .element-木 {
        color: #4CAF50;
        background: rgba(76, 175, 80, 0.1);
    }

    .element-火 {
        color: #F44336;
        background: rgba(244, 67, 54, 0.1);
    }

    .element-土 {
        color: #795548;
        background: rgba(121, 85, 72, 0.1);
    }

    .element-金 {
        color: #FFC107;
        background: rgba(255, 193, 7, 0.1);
    }

    .element-水 {
        color: #2196F3;
        background: rgba(33, 150, 243, 0.1);
    }

    .bazi-analysis {
        background: white;
        padding: 2rem;
        border-radius: 0.5rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

        .analysis-title {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 1.5rem;
            text-align: center;
            color: #4a4a4a;
            border-bottom: 2px solid #e8e0d5;
            padding-bottom: 0.5rem;
        }

        .analysis-summary {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 1rem;
            margin-bottom: 1.5rem;

            .element-count {
                padding: 0.5rem 1rem;
                border-radius: 0.25rem;
                background: #f5f5f5;
                font-size: 1.1rem;
            }
        }

        .analysis-content {
            line-height: 1.8;
            color: #4a4a4a;
            text-align: justify;

            p {
                margin-bottom: 1rem;
            }
        }
    }

    .luck-pillars {
        background: white;
        padding: 2rem;
        border-radius: 0.5rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

        .luck-title {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 1.5rem;
            text-align: center;
            color: #4a4a4a;
            border-bottom: 2px solid #e8e0d5;
            padding-bottom: 0.5rem;
        }

        .luck-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 1rem;
        }

        .luck-pillar {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 1rem;
            border-radius: 0.25rem;
            background: #f9f6f1;
            transition: transform 0.3s ease;

            &:hover {
                transform: translateY(-2px);
            }

            .luck-age {
                font-size: 0.9rem;
                color: #666;
                margin-bottom: 0.5rem;
            }

            .luck-year {
                font-size: 0.9rem;
                color: #999;
                margin-bottom: 0.5rem;
            }

            .luck-stem-branch {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 0.25rem;

                div {
                    padding: 0.25rem 0.5rem;
                    border-radius: 0.25rem;
                    font-size: 1.1rem;
                }
            }
        }
    }

    @media (max-width: 768px) {
        padding: 1rem;

        .bazi-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .luck-grid {
            grid-template-columns: repeat(4, 1fr);
        }

        .pillar {
            padding: 0.75rem;
        }

        .heavenly-stem,
        .earthly-branch {
            font-size: 1.2rem;
        }

        .analysis-content {
            font-size: 0.9rem;
        }
    }

    @media (max-width: 480px) {
        .bazi-grid {
            grid-template-columns: repeat(1, 1fr);
        }

        .luck-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }
}
</style>

<style scoped>
/* BaziChart.css */

.bazi-chart {
    padding: 2rem;
    background: linear-gradient(135deg, rgba(252, 246, 235, 0.8) 0%, rgba(252, 246, 235, 0.9) 100%);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    max-width: 900px;
    margin: 0 auto;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* 输入表单样式 */
.input-section {
    background: rgba(255, 255, 255, 0.8);
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid #d6b78e;
    margin-bottom: 2rem;
}

.input-section h3 {
    text-align: center;
    color: #8b3e2f;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    font-weight: bold;
}

.input-group {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.input-group label {
    width: 120px;
    color: #5d4037;
    font-weight: bold;
}

.input-group select,
.input-group input {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid #d6b78e;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.9);
    color: #5d4037;
}

.calculate-btn,
.reset-btn {
    display: block;
    margin: 1.5rem auto 0;
    padding: 0.75rem 2rem;
    background: linear-gradient(135deg, #a46628 0%, #8b3e2f 100%);
    color: white;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.calculate-btn:hover,
.reset-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* 八字图表样式 */
.chart-display {
    animation: fadeIn 0.8s ease-in-out;
}

.bazi-grid {
    display: flex;
    justify-content: space-around;
    margin-bottom: 2rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    border: 1px solid #d6b78e;
}

.pillar {
    text-align: center;
    padding: 1rem;
    background: linear-gradient(135deg, #fcf6eb 0%, #fff 100%);
    border: 1px solid #d6b78e;
    border-radius: 6px;
    min-width: 100px;
    transition: transform 0.3s ease;
}

.pillar:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(164, 102, 40, 0.2);
}

.pillar-label {
    font-size: 1.1rem;
    color: #8b3e2f;
    margin-bottom: 0.8rem;
    font-weight: bold;
}

.stem-branch {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.heavenly-stem,
.earthly-branch {
    font-size: 1.5rem;
    color: #a46628;
    font-weight: bold;
}

.element-info {
    font-size: 0.9rem;
    color: #5d4037;
    margin-top: 0.3rem;
}

/* 五行颜色 */
.element-木 {
    color: #4CAF50 !important;
}

.element-火 {
    color: #F44336 !important;
}

.element-土 {
    color: #FF9800 !important;
}

.element-金 {
    color: #FFD700 !important;
}

.element-水 {
    color: #2196F3 !important;
}

/* 分析结果样式 */
.bazi-analysis {
    margin-top: 2rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    border: 1px solid #d6b78e;
}

.analysis-title {
    font-size: 1.2rem;
    color: #8b3e2f;
    margin-bottom: 1rem;
    text-align: center;
    font-weight: bold;
}

.analysis-summary {
    display: flex;
    justify-content: space-around;
    margin-bottom: 1rem;
    padding: 0.8rem;
    background: rgba(252, 246, 235, 0.5);
    border-radius: 4px;
}

.element-count {
    font-size: 1rem;
    font-weight: bold;
}

.analysis-content {
    color: #5d4037;
    line-height: 1.8;
    text-align: justify;
    padding: 0.5rem;
}

/* 大运样式 */
.luck-pillars {
    margin-top: 2rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    border: 1px solid #d6b78e;
}

.luck-title {
    font-size: 1.2rem;
    color: #8b3e2f;
    margin-bottom: 1rem;
    text-align: center;
    font-weight: bold;
}

.luck-grid {
    display: flex;
    overflow-x: auto;
    padding-bottom: 1rem;
}

.luck-pillar {
    min-width: 80px;
    margin-right: 0.5rem;
    padding: 0.8rem 0.5rem;
    background: rgba(252, 246, 235, 0.8);
    border: 1px solid #d6b78e;
    border-radius: 4px;
    text-align: center;
}

.luck-age {
    font-size: 0.9rem;
    color: #8b3e2f;
    margin-bottom: 0.3rem;
}

.luck-year {
    font-size: 0.8rem;
    color: #5d4037;
    margin-bottom: 0.5rem;
}

.luck-stem-branch {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 1.2rem;
    font-weight: bold;
}

/* 动画效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 响应式调整 */
@media (max-width: 768px) {
    .bazi-chart {
        padding: 1rem;
    }

    .bazi-grid {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .pillar {
        min-width: 80px;
        padding: 0.8rem;
    }

    .heavenly-stem,
    .earthly-branch {
        font-size: 1.2rem;
    }

    .luck-grid {
        justify-content: flex-start;
    }
}

/* 打印样式 */
@media print {
    .bazi-chart {
        box-shadow: none;
        background: white;
    }

    .input-section,
    .reset-btn {
        display: none;
    }

    .bazi-grid,
    .bazi-analysis,
    .luck-pillars {
        border: 1px solid #000;
        background: white;
    }
}
</style>